<template>
	<view class="two" :data-theme="theme">
		<view class="header">
			<u-steps :current="num" :activeColor="bgColor">
				<u-steps-item :title="item.name" v-for="(item,index) in numList" :key="index">
				</u-steps-item>

			</u-steps>

		</view>
		<!-- 引用组件 -->
		<scroll-view scroll-y="true" class="scrollHeight">
			<mangeInfoPage ref="childRef" :merchantData="merchantData" />
		</scroll-view>
		<!-- <view class="btn flex flex-direction bottomStyle">
			<u-button class="cu-btn lg bg-blue" :color="bgColor" @click="next">提交</u-button>
		</view> -->
		<view class="btn">
			<button class="cu-btn lg bg-blue bg_color"
				style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;" :color="bgColor"
				@click="next">提交</button>
		</view>

	</view>
</template>

<script>
	import mangeInfoPage from '../mange-info/mange-info.vue'
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	// import mangeInfoPage from '@/components/mange-info/mange-info.vue'
	import {
		MerApplyApi,

	} from '@/api/merchant.js';
	let app = getApp();
	export default {
		components: {
			mangeInfoPage,
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				xuan: 1,
				numList: [{
					name: '提交资质'
				}, {
					name: '选择入驻方式'
				}, {
					name: '等待审核'
				}, ],
				num: 1,
				merchantData: {},
			};
		},
		async onLoad(options) {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.merchantData = JSON.parse(options.merchantData)




		},
		onShow() {
			this.$nextTick(() => {
				this.$refs.childRef.selectManageInfo(2)
			})
			if (this.merchantData.checkStatus == 1) { // 审核中
				uni.navigateTo({
					url: '/pages/certification/three/three',

				});
				uni.showModal({
					content: `审核中，我们尽快为您审核，请您耐心等待`,
					success: (res) => {

					}
				})
			}
		},

		methods: {
			// 执行下一步 
			async next() {
				this.merchantData.businessInfo = this.$refs.childRef.businessInfo
				uni.showModal({
					title: '提示',
					content: '确认提交吗？',
					success: async (res) => {
						if (res.confirm) {
							await this.MerApply()
						} else if (res.cancel) {
							this.$util.Tips({
								title: '已取消操作'
							})
						}
					}
				});

			},

			// 商户入驻申请
			async MerApply() {
				try {
					let result = await MerApplyApi(this.merchantData)
					uni.reLaunch({
						url: `/pages/certification/three/three?merchantData`,
					});
				} catch (e) {
					//TODO handle the exception
					console.log(e)
					let error = e
					uni.showModal({
						title: '提示',
						content: `${e}`,
						success: (res) => {

						}
					})
				}
			},


		}
	}
</script>

<style lang="scss">
	.header {
		margin: 20px 0;
	}

	::v-deep .u-steps-item__wrapper {
		background-color: #f5f5f5;
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.text_color {
		@include main_color(theme)
	}

	page {
		height: 100%;
	}

	.two {
		display: flex;
		flex-direction: column;
		height: 100%;

		.scrollHeight {
			flex: 1;
			min-height: 200px;
		}

		.BH5 {
			background-color: #F3F5F4;
			height: 4px;
		}



		.H50 {
			height: 50px;
		}

		.btn {
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 10px;
			width: 100%;
			background-color: #fff;
			z-index: 9;
		}

		.bottomStyle {
			position: sticky !important;
			bottom: 0px !important;
			left: 0px !important;
		}
	}
</style>